<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="kfzjw008">
    
    <meta name="description" content="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">
    
    
    
    
    
    
    <title>【WEB】web开发入门实战(1) | 几何军工作室</title>
    <!-- inject:style -->
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <!-- endinject -->
    <style>
        .cube-loading {
            top: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            background: url('/images/lg/loading.gif') no-repeat center center;
            background-color: rgba(0,0,0,.7);
        }

        .cube-loading.out {
            display: none;
        }

        .cube-loading:before {
            display: block;
            content: '加载中';
            position: relative;
            width: 100%;
            top: 50%;
            right: -50%;
            color: #fff;
        }

        @media(max-width: 768px) {
            .cube-loading:before {
                font-size: 1.2em;
                transform: translate(-24px,20px);
                -webkit-transform: translate(-24px,20px);
                -o-transform: translate(-24px,20px);
                -ms-transform: translate(-24px,20px);
            }
        }

        @media(min-width: 768px) {
            .cube-loading:before {

            }
        }
    </style>
    
</head>
<body>
<div class="cube-body">
    <nav id="cube-top-memu" class="cube-menu">
    <ul class="cube-menu-collapse">
        
        <li>
            <i class="cube-icon cube-icon-home" aria-hidden="true"></i>
            <a href="/">首页</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-categories" aria-hidden="true"></i>
            <a href="/categories">分类</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-tags" aria-hidden="true"></i>
            <a href="/project">工程项目</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/competition">学科竞赛</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/zone">原创空间</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-about" aria-hidden="true"></i>
            <a href="/about-me">关于我</a>
        </li>
        
    </ul>
</nav>
<nav class="cube-side-menu" id="cube-side-menu">
    <ul class="cube-menu-list">
        
        <li>
            <a class="lrc-control">开启歌词</a>
        </li>
        
        <li>
            <a class="scroll-to-top">回到顶部</a>
        </li>
    </ul>
</nav>
    <header class="cube-header" id="cube-header">
    <img src=" http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg " alt="头部背景图片">
    
    <div class="cube-type">
        <span class="cube-typed-title">几何军工作室</span>
        <span class="cube-typed-cursor">|</span>
    </div>
    
</header>

    <style>
        nav.cube-menu:before {
            content: '';
            visibility: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 44px;
        
            filter: blur(5px);
            -webkit-filter: blur(5px);
        
            z-index: -1;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-repeat: no-repeat;
            background-position: center -356px;
            background-size: cover;
            background-color: transparent;
        }

        header.cube-background.cube-header-background {
            visibility: hidden;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-position: center -400px;
        }
    </style>
    <header class="cube-background cube-header-background">
        
        <div class="cube-type">
            <span class="cube-typed-title">几何军工作室</span>
            <span class="cube-typed-cursor">|</span>
        </div>
        
    </header>
    <div class="load-header-background"></div>
    <script>
        (function (window) {

            window.headerModule = {}
            window.headerModule.image = {
                width: '2000',
                height: '850'
            }

        })(window)
    </script>
    
    <div class="cube-content">
        <div class="cube-left">
            <div class="cube-article">
    <h1 class="title">【WEB】web开发入门实战(1)</h1>
    
    <div class="cube-article-header">
        <div class="cube-article-date">
            <i class="cube-icon cube-icon-date" aria-hidden="true"></i>
            <!-- moment.js对象 -->
            2018-11-07
            <span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
                   
</span>
        </div>
        <div class="cube-article-tags">
    <i class="cube-icon cube-icon-tag" aria-hidden="true"></i>
    
    <a href="/tags/期末复习/">#期末复习</a>
    
    <a href="/tags/HTML/">#HTML</a>
    
    <a href="/tags/CSS/">#CSS</a>
    
    <a href="/tags/前端/">#前端</a>
    
</div>
    </div>
    
    
    <div class="cube-article-content cube-markdown">
        
        <h1 id="【WEB】web开发入门实战-1"><a href="#【WEB】web开发入门实战-1" class="headerlink" title="【WEB】web开发入门实战(1)"></a>【WEB】web开发入门实战(1)</h1><h2 id="html实例"><a href="#html实例" class="headerlink" title="html实例"></a>html实例</h2><h3 id="1、基本标签实例"><a href="#1、基本标签实例" class="headerlink" title="1、基本标签实例"></a>1、基本标签实例</h3><p><strong>在WebContent下，创建基于HTML5规范的table.html，实现绘制表格。</strong><br><a id="more"></a><br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Insert title here<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--  以下为核心代码--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span></span><br><span class="line">学生信息</span><br><span class="line"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">说明：</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">th</span>&gt;</span>1<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">th</span>&gt;</span>1<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">th</span>&gt;</span>1<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">th</span>&gt;</span>1<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="2、页面布局实例"><a href="#2、页面布局实例" class="headerlink" title="2、页面布局实例"></a>2、页面布局实例</h2><p><strong>在WebContent下，创建nav.html实现绘制信息</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Insert title here<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"123"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="3、form标签实验"><a href="#3、form标签实验" class="headerlink" title="3、form标签实验"></a>3、form标签实验</h2><h3 id="实验原理"><a href="#实验原理" class="headerlink" title="实验原理"></a>实验原理</h3><p>通过创建HTML5网页，验证form内多种元素标签及其属性的作用及意义。</p>
<h3 id="实验目的"><a href="#实验目的" class="headerlink" title="实验目的"></a>实验目的</h3><p>理解并掌握Form表单提交必须声明的内容<br>理解并掌握结合table元素结构化布局form内容<br>理解并掌握Fieldset分组元素<br>理解并掌握Input元素中多种类型属性的使用方法及使用场景<br>理解并掌握Label元素的使用方法及意义<br>理解并掌握Datalist元素的使用方法<br>理解并掌握Required、checked、accept等input基本属性的意义<br>理解并掌握button元素 submit reset类型的作用</p>
<h3 id="实验内容"><a href="#实验内容" class="headerlink" title="实验内容"></a>实验内容</h3><p>基于5第一个Web应用创建Web工程，Experiment-01<br>在WebContent目录下，创建register.html文件，完成一个注册页面的设计与实现</p>
<h3 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h3><p>个人信息组<br>用户名与密码，注册密码禁止显式显示在页面<br>性别单选组<br>生日日期输入框<br>籍贯，允许用户通过下拉选择或手动输入<br>学历，下拉单项选择，学士为默认选中状态</p>
<h3 id="其他信息组"><a href="#其他信息组" class="headerlink" title="其他信息组"></a>其他信息组</h3><p>喜欢的课程，多选组通过列表实现，Web开发技术，为默认选中状态<br>照片，为上传图片，且友好限制用户上传文件类型</p>
<p>提交、重置，按钮，需声明正确的类型</p>
<p>为每一个注册项与项的输入域，实现联动<br>注册项以及项的输入域，通过table实现布局(后期通过div+css重构)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">base</span> <span class="attr">href</span>=<span class="string">""</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>register<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">legend</span>&gt;</span>about me <span class="tag">&lt;/<span class="name">legend</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span> <span class="attr">style</span>=<span class="string">"text-align:right"</span>&gt;</span> <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"name"</span>&gt;</span>name<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"username"</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">required</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">list</span>=<span class="string">"123"</span>&gt;</span><span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">"123"</span>&gt;</span> <span class="tag">&lt;<span class="name">option</span>&gt;</span>1<span class="tag">&lt;/<span class="name">option</span>&gt;</span><span class="tag">&lt;/<span class="name">datalist</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="css实例"><a href="#css实例" class="headerlink" title="css实例"></a>css实例</h2><h3 id="1、基本样式实验"><a href="#1、基本样式实验" class="headerlink" title="1、基本样式实验"></a>1、基本样式实验</h3><p>实验原理<br>通过创建CSS样式文件，理解CSS样式基本属性作用及意义。</p>
<p>实验目的<br>理解CSS基本概念及功能<br>理解CSS样式的设计原则<br>理解并掌握CSS样式的基本声明方法<br>理解并掌握多种CSS选择器的使用方法<br>理解并掌握字文本、表格、超链接等元素常用属性的使用方法<br>理解并掌握背景、颜色、内外边距、尺寸、圆角等CSS基本属性的使用方法<br>理解并掌握工程项目静态资源的声明方法<br>理解并掌握页面文件、CSS文件对静态资源的调用方法</p>
<p>实验内容<br>基于5第一个Web应用，创建Web工程，Experiment-02</p>
<p>在webcontent下，创建table.html文件，直接复制6.1基本标签实例，中table表格代码<br>实现：通过定义CSS属性，优化以上html内容<br>统一网站所有页面的共同属性：<br>字体样式，微软雅黑，尺寸为18px</p>
<p>Table样式：横向占用最大空间；标题与内容均居，且内边距上下左右均为5px；仅显示行的下线；奇偶行背景颜色不同</p>
<p>超链接button样式：定义与基本超链接不同的，按钮样式的超链接，背景颜色红色，圆角等，鼠标悬浮时改变样式<br>如何在渲染行时，计算inline超链接的高度？</p>
<p>标签span样式，基于span定义不同场景的标签，成功、警告、错误等：<br>抽象化默认标签样式，默认标签定义圆角3px；内边距左右5px；<br>具体化成功标签样式，警告标签样式，基于默认标签样式添加相应背景颜色<br>采用“层叠”方式使用标签的意义是什么？</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"><span class="comment">/* -------------设置网站全局属性---------------- */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">"Microsoft YaHei"</span> ;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* --------------全局table属性-------------------- */</span></span><br><span class="line"><span class="selector-tag">table</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">border-collapse</span>: collapse;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">th</span>, <span class="selector-tag">td</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">tbody</span> <span class="selector-tag">tr</span><span class="selector-pseudo">:nth-child(odd)</span> &#123;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="number">#f2f2f2</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* --------------全局超链接按钮------------------ */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.btn</span><span class="selector-pseudo">:link</span>, <span class="selector-tag">a</span><span class="selector-class">.btn</span><span class="selector-pseudo">:visited</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f44336</span>;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">25px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.btn</span><span class="selector-pseudo">:hover</span>, <span class="selector-tag">a</span><span class="selector-class">.btn</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* -----------全局自定义标签------------ */</span></span><br><span class="line"><span class="comment">/* 抽象全局标签，仅设置大小圆角等基本属性 */</span></span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.label</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 警告标签，橙色 */</span></span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.label-warning</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 成功标签，绿色 */</span></span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.label-success</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#5cb85c</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="网页布局实验"><a href="#网页布局实验" class="headerlink" title="网页布局实验"></a>网页布局实验</h3><p>实验原理<br>通过定义css样式，理解css属性以及页面真整体结构布局的方法及设计思想<br>实验目的<br>理解并掌握多种css选择器的使用方法<br>理解并掌握后代选择器的作用及使用设计方法<br>理解并掌握伪类的作用、意义及使用方法<br>理解并掌握基于div容器页面布局的方法<br>理解并掌握页面整体结构布局的实现方法及设计思想<br>理解并掌握上导航、边侧栏的实现方法及设计思想</p>
<p>实验内容<br>基于5第一个Web应用，创建Web工程，Experiment-03<br>在WebContent下，创建index.html文件，直接复制使用以下代码<br>理解header，nav，aside等html5结构化页面的语义元素</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">header</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">nav</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 基于后代/子选择器，减少类的数量，降低与HTML的耦合 */</span></span><br><span class="line"><span class="selector-tag">nav</span>&gt;<span class="selector-tag">ul</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">list-style-type</span>: none;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">nav</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block; <span class="comment">/* 变为block级，填充高宽 */</span></span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">14px</span> <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">nav</span> <span class="selector-class">.active</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#4CAF50</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 上导航鼠标悬停样式 */</span></span><br><span class="line"><span class="selector-tag">nav</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#111</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 导航中右对齐内容样式，li元素样式 */</span></span><br><span class="line"><span class="selector-tag">nav</span> <span class="selector-class">.right</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* -------------------主区域样式，包含左边侧栏与主内容区域--------------------------  */</span></span><br><span class="line"><span class="selector-tag">main</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*  ------------左边侧栏--------------  */</span></span><br><span class="line"><span class="selector-tag">aside</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">vertical-align</span>: top;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">230px</span>; </span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 一二级ul样式 */</span></span><br><span class="line"><span class="selector-tag">aside</span> <span class="selector-tag">ul</span> &#123;</span><br><span class="line">  <span class="attribute">list-style-type</span>: none;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f1f1f1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 一二级超链接导航样式 */</span></span><br><span class="line"><span class="selector-tag">aside</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">8px</span> <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 一级标题 */</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-class">.submenu</span>&gt;<span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#1d835a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">aside</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#555</span>;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*------------------------主内容区域-----------------------  */</span></span><br><span class="line"><span class="comment">/* 可通过%设置宽度，默认宽度为内容宽度 */</span></span><br><span class="line"><span class="selector-tag">article</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">vertical-align</span>: top;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*-------------------------footer------------------------------- */</span></span><br><span class="line"><span class="selector-tag">footer</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>以上实例内容来自课程实验指导书，实现代码为个人编写。</p>

    </div>
</div>

<div class="cube-article-nav">
    <ul>
        
        <li class="prev">
            <a href="/2018/11/07/2019/">
                <i class="cube-icon cube-prev" aria-hidden="true"></i>
                【WEB】web开发入门实战(2)
            </a>
        </li>
        
        
        <li class="next">
            <a href="/2018/11/06/web3/">
                【WEB】web开发基础知识整理（3）
                <i class="cube-icon cube-next" aria-hidden="true"></i>
            </a>
        </li>
        
    </ul>
</div>


<!-- TODO 根据theme.comment的内容进行入口选择 -->


<!-- Table of Contents -->

        </div>
        <div class="cube-right">
            

<div class="cube-search cube-sidebar" id="cube-search">
    <div class="search-container">
        <input type="text" placeholder="搜索" class="cube-search-input" id="cube-search-input">
        <i class="cube-icon cube-icon-search cube-search-submit" aria-hidden="true"></i>
    </div>
    <!-- TODO 通过给window赋一个全局变量，通过脚本赋值 -->
</div>
<script>
    (function (window) {
        'use strict';
        window.searchModule = {}
        window.searchModule.JSONUrl = '/content.json'
        window.searchModule.rootUrl = '/'
    })(window)
</script>
<div class="cube-search-form">
    <div class="cube-search-control">
        <input type="text" placeholder="搜索" class="search-input">
        <a class="close-button">
            <i class="cube-icon cube-close" aria-hidden="true"></i>
        </a>
    </div>
    <div class="cube-search-result"></div>
</div>


<div class="cube-author cube-sidebar" id="cube-author">
    
    
    <span>kfzjw008</span>
    
    
    <a title="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备</a>
    
    <div class="count">
        <a class="count articles"><span>25</span>文章</a>
        <a class="count tags"><span>22</span>标签</a>
        <a class="count categories"><span>7</span>分类</a>
    </div>
</div>



<div class="cube-music cube-sidebar" id="cube-music">
    <div class="cube-player aplayer" id="cube-player"></div>
</div>
<script>
    (function (window) {
        window.musicModule = {}
        window.musicModule.musicConfig = '{"narrow":false,"autoplay":true,"showlrc":3,"theme":"#b7daff","mutex":true,"mode":"circulation","preload":"auto","listmaxheight":"513px","music":[{"title":"光明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%85%89%e6%98%8e-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"不羁的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%b8%8d%e7%be%81%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"上千个黎明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0-%e4%b8%8a%e5%8d%83%e4%b8%aa%e9%bb%8e%e6%98%8e.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"信仰在空中飘扬","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%bf%a1%e4%bb%b0%e5%9c%a8%e7%a9%ba%e4%b8%ad%e9%a3%98%e6%89%ac-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"像梦一样自由","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%83%8f%e6%a2%a6%e4%b8%80%e6%a0%b7%e8%87%aa%e7%94%b1-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"怒放的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%80%92%e6%94%be%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"大桥上","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0%20-%20%e5%a4%a7%e6%a1%a5%e4%b8%8a.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"流年啊，你奈我何","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b5%81%e5%b9%b4%e5%95%8a%20%e4%bd%a0%e5%a5%88%e6%88%91%e4%bd%95-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"生来彷徨","author":"汪峰","url":"http://47.95.213.193/mp3data/%e7%94%9f%e6%9d%a5%e5%bd%b7%e5%be%a8-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"}]}'
        window.musicModule.lrcConfig = {
            open: '开启歌词',
            close: '关闭歌词'
        }
    })(window)
</script>



<div class="cube-recent-posts cube-sidebar" id="cube-recent-posts">
    <div class="title">
        <a>近期文章</a>
    </div>
    <ul class="list">
        
        
        <li>
            <!-- TODO 如果文章要显示图片，那么在front-matter上添加preview属性(url or path) -->
            
            <div class="normal">
                <p class="index first">
                    <span>1</span>
                </p>
                <p class="title">
                    <a href="/2019/03/27/2038/" title="JAVA学习笔记(2)-spring MVC">JAVA学习笔记(2)-spring MVC</a>
                </p>
            </div>
            
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>2</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2036/" title="JAVA学习笔记">JAVA学习笔记</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>3</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2037/" title="设计模式学习笔记-01">设计模式学习笔记-01</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>4</span>
                </p>
                <p class="title">
                    <a href="/2019/03/23/2035/" title="蓝桥杯比赛前夜-知识总结">蓝桥杯比赛前夜-知识总结</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>5</span>
                </p>
                <p class="title">
                    <a href="/2019/03/21/2034/" title="建立友好合作博客的方式">建立友好合作博客的方式</a>
                </p>
            </div>
        </li>
        
        
    </ul>
</div>



<div class="cube-categories cube-sidebar" id="cube-categories">
    <div class="title">
        <a href="/categories">分类</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box ">
            <a href="/categories/WEB开发/">#WEB开发</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/categories/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/博客公告/">#博客公告</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/categories/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/categories/JAVA/">#JAVA</a>
        </div>
        
    </div>
</div>



<div class="cube-tagcloud cube-sidebar" id="cube-tagcloud">
    <div class="title">
        <a href="/tags">标签云</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box ">
            <a href="/tags/servlet/">#servlet</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/期末复习/">#期末复习</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/HTML/">#HTML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/CSS/">#CSS</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/前端/">#前端</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/算法/">#算法</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/随笔/">#随笔</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/jQuery/">#jQuery</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/JavaScript/">#JavaScript</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/WEB-Service/">#WEB Service</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/题解/">#题解</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/MYSQL/">#MYSQL</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/BLOG/">#BLOG</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/HEXO/">#HEXO</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/JAVA/">#JAVA</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/UML/">#UML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/软件体系结构/">#软件体系结构</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/Spring-MVC/">#Spring MVC</a>
        </div>
        
    </div>
</div>



<div class="cube-links cube-sidebar" id="cube-links">
    <div class="title">
        <a>个人链接</a>
    </div>
    <ul class="list">
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/GitHub.png">
            
            <a href="https://github.com/kfzjw008" target="_blank">我的GitHub</a>
        </li>
        
        <li>
            
            
            <img src="https://www.csdn.net/company/img/csdn-logo.svg">
            
            <a href="https://blog.csdn.net/kfzjw008" target="_blank">我的CSDN</a>
        </li>
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/SF.png">
            
            <a href="https://47.95.213.193" target="_blank">我的个人主页</a>
        </li>
        
        <li>
            
            
            <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=fc01334b798b4710ce2ffacafbf5a4c0/1b4c510fd9f9d72a26f9db77df2a2834349bbb3f.jpg">
            
            <a href="https://www.zhihu.com/people/zhang-jun-wei-81-7/activities" target="_blank">我的知乎主页</a>
        </li>
        
    </ul>
</div>



<div class="cube-friend-links cube-sidebar" id="cube-friend-links">
    <div class="title">
        <a>友情链接</a>
    </div>
    <ul class="list">
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="http://cube-1252774894.cosgz.myqcloud.com/friend_links/micblo.png">
            <a href="https://github.com/MajorBill-Liu" target="_blank">MajorBill-Liu 的github</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
    </ul>
</div>


        </div>
    </div>
</div>
<footer class="cube-footer">
    
© 2017 kfzjw008

<br>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>


</footer>
<!-- inject:script -->
<script src="/js/script.js"></script>
<!-- endinject -->
<div class="cube-loading out"></div>
</body>
</html>